<template>
    <div class="attractions-topics">
        <div class="attTop-header">
            <router-link to="/recommend" class="backLeft">
                <i class="get-icon">&#xe600;</i>
            </router-link>
            <div class="attTop-Text">
                 <p>景点专题</p>
            </div>
        </div>
        <div class="attTop-main">
            <ul class="attTop-mainUl">
                <li>
                    <div class="attTop-mask">
                        <div><img :src="imgNo1" alt=""></div>
                        <div class="attTop-content">
                            <p>{{ name01 }}</p>
                            <p>峨眉天下秀</p>
                            <van-rate
                                    v-model="value"
                                    allow-half
                                    void-icon="star"
                                    void-color="#eee"
                                    readonly
                            />
                        </div>
                    </div>
                </li>
                <li>
                    <div class="attTop-mask">
                        <div><img :src="imgNo2" alt=""></div>
                        <div class="attTop-content">
                            <p>{{ name02 }}</p>
                            <p>东方佛都</p>
                            <van-rate v-model="value"
                                      readonly/>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="attTop-mask">
                        <div><img :src="imgNo3" alt=""></div>
                        <div class="attTop-content">
                            <p>{{ name03 }}</p>
                            <p>阆苑仙境</p>
                            <van-rate v-model="value"
                                      readonly />
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.attractions();
        },
        data(){
            return{
                name01:'',
                name02:'',
                name03:'',
                imgNo1:'',
                imgNo2:'',
                imgNo3:'',
                fireAttractions:[],
                value:5,
            }
        },
        methods:{
            attractions(){
                this.axios.get('http://10.30.21.218/scenic',{
                    params:{
                        adcode:'510000',
                        id:'3433',
                        name:'四川省',
                        pageNum:'1',
                        pageSize:'3',
                        showChild:false
                    }
                })
                    .then((res) => {
                        this.fireAttractions = res.data.data.list;
                        console.log(this.fireAttractions);
                        this.imgNo1 = this.fireAttractions[0].parent.images.split(",")[0].slice(2);
                        this.imgNo2 = this.fireAttractions[1].parent.images.split(",")[0].slice(2);
                        this.imgNo3 = this.fireAttractions[2].parent.images.split(",")[0].slice(2);
                        this.imgNo1 = this.imgNo1.substring(0,this.imgNo1.length-1);
                        this.imgNo2 = this.imgNo2.substring(0,this.imgNo2.length-1);
                        this.imgNo3 = this.imgNo3.substring(0,this.imgNo3.length-1);
                        this.name01 = this.fireAttractions[0].parent.name;
                        this.name02 = this.fireAttractions[1].parent.name;
                        this.name03 = this.fireAttractions[2].parent.name;
                    })
                    .catch()
            }
        }
    }
</script>

<style>
    .attTop-icon{
        font-family: iconfont;
        font-style: normal;
        color: #e8a41c;
        font-size: 20px;
    }
    /*.......................*/
    .attTop-header {
        width: 686px;
        height: 60px;
        margin: 70px auto;
        display: flex;
        position: relative;
    }

    .attTop-header>.backLeft {
        display: block;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }

    .attTop-header>.backLeft > i {
        color: black;
    }

    .attTop-Text {
        width: 608px;
        height: 100%;
        line-height: 60px;
        text-align: center;
        font-size: 36px;
    }
    .attTop-mainUl>li{
        display: block;
        position: relative;
        width: 100%;
        height: 314px;
        background: #333333;
        border-radius: 30px;
        margin-bottom: 25px;
    }
    .attTop-mask>div:nth-child(1){
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .attTop-mask>div:nth-child(1)>img{
        width: 100%;
        height: 100%;
        border-radius: 14px;
    }
    .attTop-mask{
        width: 100%;
        height: 100%;
        background: rgba(68,68,74,0.5);
        border-radius: 30px;
        position: relative;
    }
    .attTop-content{
        width: 168px;
        height: 126px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
    }
    .attTop-content>p{
        color: white;
    }
    .attTop-content>p:first-of-type{
        font-size: 40px;
    }
    .attTop-content>p:last-of-type{
        font-size: 24px;
    }
    .stars{
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
